<template>
	<scroll-view
		class="fixed-scroll"
		:style="{ height }"
		scroll-y
		:lower-threshold="lowerThreshold"
		@scrolltolower="onReachBottom"
	>
		<!-- 列表项：默认样式，可通过插槽自定义 -->

			   <view v-for="(item, index) in items" :key="index" @click="handleClick(item)" class="news-item">
              <view class="left">
                <view class="icon-body">
                  <img v-if="item.messageBusinessType ===1" class="w-48rpx h-48rpx" src="../../static/icon-mes.png" alt="order" />
                  <img v-else-if="item.messageBusinessType === 2" class="w-48rpx h-48rpx" src="../../static/icon-res.png" alt="order" />
                  <img v-else class="w-48rpx h-48rpx" src="../../static/icon-msg-order.png" alt="order" />
                </view>
              </view>
              <view>
                <view class="news-title flex justify-between items-center">
                  <view>{{ item.businessDetailTypeDesc }}</view>
                  <view class="right">{{ item.messageCreatedTime }}</view>
                </view>
                <view class="flex justify-between items-center m-t-10rpx">
                  <view>
                    <view class="desc">{{ item.message }}</view>
                    <view class="desc" v-if="item.messageBusinessType === 2">
                      <view v-for="(detailItem, dindex) in item.messageDetail" :key="dindex">
                        {{ detailItem }}
                      </view>
                    </view>
                  </view>
                  <view class="arrow">
                   <image class="w-50rpx h-50rpx" src="../../static/右箭头icon.svg"></image>
                  </view>
                </view>
              </view>

            </view>
		<!-- 底部状态 -->
		<view class="footer">
			<view v-if="loading" class="tip">加载中...</view>
			<view v-else-if="finished" class="tip">没有更多了</view>
			<view v-else class="tip">上拉加载更多</view>
		</view>
	</scroll-view>
  <message-modal ref="msgRef" :delay="5" :auto="true" />
</template>

<script setup lang="ts">
import { useSupplierStore } from "@/store";

const supplierStore = useSupplierStore()
const msgRef = ref(null)
const props = withDefaults(defineProps<{
	items: any[]
	height?: string
	lowerThreshold?: number
	loading?: boolean
	finished?: boolean
	itemKey?: string
	itemTextKey?: string
	disabled?: boolean
}>(), {
	height: '320px',
	lowerThreshold: 60,
	loading: false,
	finished: false,
	itemKey: '',
	itemTextKey: '',
	disabled: false
})

const emit = defineEmits<{
	(e: 'refresh'): void
}>()

function onReachBottom() {
	if (props.disabled || props.loading || props.finished) return
	emit('refresh')
}
function handleClick(row) {
   if(row.messageBusinessType ===1){
    msgRef.value.showMsg(row,0)
   }else{
    if(row.businessDetailType === 401){
      uni.navigateTo({
        url: `/pages/deliveryConsultation/index?id=${row.poId}`
      })
    }else{
      if(row.poId){
        uni.navigateTo({
          url: `/pages/orderDetail/index?id=${row.poId}`,
        })
      }else{
        // uni.switchTab({
        //   url: 'pages/orderList/index'
        // })
        if(row.messageDetail.length === 1){
          uni.navigateTo({
            url: `/pages/orderDetail/index?id=${row.messageDetail[0].poId}`,
          })
        }else{
          supplierStore.setWaitSend(true)
          uni.switchTab({
            url: `/pages/orderList/index`,
          })
        }
      }
    }
   }
}
</script>

<style scoped>
.fixed-scroll {
	/* 外层固定高度由行内 style 控制 */
	box-sizing: border-box;
}
.list-row {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	background-color: #fff;
}
.row-default {
	font-size: 14px;
	color: #333;
}
.footer {
	padding: 10px 0 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tip {
	font-size: 12px;
	color: #909399;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #f0f0f0;

}
.news-item .bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2f3f5;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.news-title {
  font-weight: 600;
}
.desc {
  color: #666;
  font-size: 12px;
  word-break: break-all;
}
.right {
  text-align: right;
  color: #999;
  font-size: 12px;
}
.arrow {
  font-size: 20px;
  color: #c9c9c9;
}
.icon-body{
  width: 60rpx;
  height: 60rpx;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
